import { useState, useEffect } from 'react'
function Clock() {
    const [time, setTime] = useState('');
    // 格式化时间，时间不足两位数时 补0
    function formatTime(time) {
        return time < 10 ? `0${time}` : time
    }
    useEffect(() => {
        console.log(time)
    }, [time])
    useEffect(() => {
        // 模拟时间用 定时器 setInterval
        const timer = setInterval(() => {
            const now = new Date()
            const h = formatTime(now.getHours()) // 小时
            const m = formatTime(now.getMinutes()) // 分钟 
            const s = formatTime(now.getSeconds()) // 秒钟
            setTime(`${h}:${m}:${s}`)  // HH:MM:SS
        }, 1000)

        return () => {
            // 清理定时器,避免内存泄漏导致的内存溢出
            clearInterval(timer)
        }
    }, [])

    return <div>
        <h1>{time}</h1>
    </div>
}

export default Clock